<template>
    <!--首页导航-->
        <nav class="msite_nav">
          <div class="swiper-container">
            <div class="swiper-wrapper">
              <div class="swiper-slide" v-for="(items,index) in filterArr" :key="index">
                <a href="javascript:" class="link_to_food" v-for="(item) in items" :key="item.id">
                  <div class="food_container">
                    <img :src="imgBaseUrl+item.image_url">
                  </div>
                  <span>{{item.title}}</span>
                </a>
              </div>

            </div>
            <!-- Add Pagination -->
            <div class="swiper-pagination"></div>
          </div>
        </nav>
</template>

<script>

// 1引入我们的swiper插件
  import Swiper from 'swiper'


 //2 swiper  css
 import 'swiper/css/swiper.min.css'
export default {
  props:['categorys'],
  name: '',
  data () {
    return {
      imgBaseUrl:"https://fuss10.elemecdn.com"
    }
  },
  computed:{
    filterArr(){
      //let categorys=this.categorys;
      let {categorys}=this;
      console.log(categorys)
      let minArr=[];
      let maxArr=[];
      categorys.forEach(v=>{

        if(minArr.length==8){
          minArr=[]
        }
        if(minArr.length==0){
          maxArr.push(minArr)
        }


         minArr.push(v)
      })
      console.log(maxArr)
      return maxArr
    }

  },
  methods: {},
  watch:{
    filterArr(val,oldVal){
      console.log(val)
      if(val){
        this.$nextTick(function(){
            var mySwiper = new Swiper ('.swiper-container', {
             direction: 'horizontal', // 垂直切换选项
              loop: true, // 循环模式选项

               // 如果需要分页器
              pagination: {
              el: '.swiper-pagination',
    },
  })
        })
      }

    }
  },
  mounted() {
    	//dom才可以拿到dom的数据


  },


}
</script>

<style scoped  lang='stylus' rel='stylesheet/stylus'>
@import '../../common/stylus/mixins.styl'
.msite_nav
            bottom-border-1px(#e4e4e4)
            margin-top 45px
            height 200px
            background #fff
            .swiper-container
              width 100%
              height 100%
              .swiper-wrapper
                width 100%
                height 100%
                .swiper-slide
                  display flex
                  justify-content center
                  align-items flex-start
                  flex-wrap wrap
                  .link_to_food
                    width 25%
                    .food_container
                      display block
                      width 100%
                      text-align center
                      padding-bottom 10px
                      font-size 0
                      img
                        display inline-block
                        width 50px
                        height 50px
                    span
                      display block
                      width 100%
                      text-align center
                      font-size 13px
                      color #666
              .swiper-pagination
                >span.swiper-pagination-bullet-active
                  background #02a774
          .msite_shop_list
            top-border-1px(#e4e4e4)
            margin-top 10px
            background #fff
            .shop_header
              padding 10px 10px 0
              .shop_icon
                margin-left 5px
                color #999
              .shop_header_title
                color #999
                font-size 14px
                line-height 20px
            .shop_container
              margin-bottom 50px

</style>
